<template>
    <div class="list">
    <el-row class="head">
        <el-col >——报账单列表/报账单</el-col>
    </el-row>
        <el-row class="title">
            <el-col>报账单列表</el-col>
        </el-row>
    <el-form class="demo-ruleForm"  v-model="ruleform" label-width="100px" >
        <el-form-item  label="状态" >
            <el-checkbox-group  :min="1" :max="5" v-model="ruleform.statusallS">
                <el-checkbox  v-for="item in statu"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value" >
                </el-checkbox>
            </el-checkbox-group>
        </el-form-item>
        <el-form-item  label="分类">
        <el-select v-model="ruleform.typeId" placeholder="请选择分类" @change="refresh">
            <el-option
                    v-for="item in options"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
            </el-option>
        </el-select>
        </el-form-item>

        <el-form-item label="报障人工号">
            <el-input v-model="ruleform.userId" placeholder="请输入报障人工号"  style="width: 600px"></el-input>
        </el-form-item>

        <el-form-item label="报障人手机">
            <el-input v-model="ruleform.userMobile" placeholder="请输入报障人手机" style="width: 600px"></el-input>
        </el-form-item>
        <el-form-item label="故障区域" >
            <el-select v-model="ruleform.locationId" placeholder="请选择活动区域">
                <el-option
                        v-for="item in locations"
                        :key="item.id"
                        :label="item.second"
                        :value="item.id">
                    <span style="float: left">{{ item.second }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.first }}</span>
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="故障位置">
            <el-input v-model="ruleform.userRoom" placeholder="请输入故障位置" style="width: 600px"></el-input>
        </el-form-item>

        <el-button class="el_sub" style="margin-left: 250px" @click="submit()"> 查询</el-button>
    </el-form>

        <el-table
                :data="repairs"
                style="width: 100%">
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="开始申报时间:" label-width="100px" >
                                    <span>{{  props.row.createdAt }}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="开始维修时间:" label-width="100px">
                                    <span>{{  props.row.acceptedAt }}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="维修完成时间:" label-width="100px">
                                    <span>{{ props.row.repairedAt }}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="开始维修时间:" label-width="100px">
                                    <span>{{  props.row.acceptedAt }}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column
                    label="流水号"
                    prop="id">
            </el-table-column>
            <el-table-column
                    label="状态"
                    prop="statusName">
            </el-table-column>
            <el-table-column
                    label="分类"
                    prop="type.name">
            </el-table-column>
            <el-table-column
                    label="一级区域"
                    prop="location.first">
            </el-table-column>
            <el-table-column
                    label="二级区域"
                    prop="location.second">
            </el-table-column>
            <el-table-column
                    label="故障房间号"
                    prop="userRoom">
            </el-table-column>
            <el-table-column
                    label="保障人姓名"
                    prop="userName">
            </el-table-column>
            <el-table-column
                    label="保障人手机号"
                    prop="userMobile">
            </el-table-column>
            <el-table-column
                    label="故障类别"
                    prop="adminDescription">
            </el-table-column>
            <el-table-column
                    label="保障时间"
                    prop="createdAt">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>

        </el-table>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="ruleform.page.pageNum"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="10"
                layout="sizes, prev, pager, next"
                :total="total">
        </el-pagination>
    </div>
</template>

<script>
    export default {
        name: "list",
        data() {
            return {
                total:0,
                ruleform:{
                    statusallS:['已删除','等待维修','正在维修','维修完成','评价完成'],
                    statusall:[],
                    typeId:'',
                    userId:'',
                    userMobile:'',
                    locationId:'',
                    userRoom:'',
                    page: {
                        pageNum: 1,
                        pageSize:10
                    }
                },


                statu:[{
                    value:0,
                    label:'已删除'
                },{
                    value:1,
                    label:'等待维修'
                },{
                    value:2,
                    label:'正在维修'
                },{
                    value:3,
                    label:'维修完成'
                },{
                    value:4,
                    label:'评价完成'
                }
                ],


                options: [],

                locations:[],

                firsts:[],

                repairs:[]
            }
        },
        created(){
            this.submit();
            var data ={'typeId': 0};
            this.getLocations(data);
            this.getTypes();

        },
        methods:{
            refresh(){

                var data ={'typeId': this.ruleform.typeId};
                this.ruleform.locationId="";
                this.getLocations(data);
            },
            submit() {
                this.ruleform.statusall=[];
                for ( var i=0;i<this.ruleform.statusallS.length;i++)
                {
                    this.ruleform.statusall[i]=this.handlestatus(this.ruleform.statusallS[i]);
                }
                this.getRepairs();
            },
            //动态获取保障列表
            getRepairs(){
                this.$axios.post("/api/v1/user/repair/listrepair",this.ruleform)
                    .then(result=>{
                        return result.data
                    })
                    .then(data2=>{
                        console.log(data2);
                        this.repairs=data2.data.list;
                        this.total=data2.data.total;
                    })
            },
            //获取type列表
            getTypes()
            {
                this.$axios.post("/api/v1/user/type/list").then(result => {

                    return result.data;
                })
                    .then(data1 => {
                        this.options=data1.data;
                    });
            },
            //获取地区列表
            getLocations(data)
            {
                this.$axios.post("/api/v1/user/location/list", data).then(result => {

                    return result.data;
                })
                    .then(data1 => {
                        console.log(data1);
                        this.locations = data1.data;
                    });
            },
            handlestatus(val)
            {
                if (val === '已删除')
                  return 0;
                if (val === '等待维修')
                    return 1;
                if (val === '正在维修')
                    return 2;
                if (val === '维修完成')
                    return 3;
                if (val === '评价完成')
                    return 4;

            },
            handleSizeChange(val) {

                this.ruleform.page.pageSize=val;
                console.log( this.ruleform.page.pageSize);
                this.submit();
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.ruleform.page.pageNum=val;
                this.submit();
            }
        }
    }
</script>

<style >
    .list{
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        /* padding: 16px; */
    }
    .el-input{
        width: 600px;
    }
    .el_sub{
        margin-left: 340px;
        width: 200px;
    }
    .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
    .el-checkbox-group {
         height: auto;
    }
</style>
